<script setup>
  import { ref, reactive } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { SaveSuggest } from '@/api/help/suggest'
  import netSetting from '@/configs/netSetting'
  const { baseURL } = netSetting
  const kfImg = baseURL + '/appFiles/image/qrcode/kfqrcode.jpg?_ts=' + new Date().getTime()
  const uploadImgURL = ref(baseURL + '/v1/media/image/upload/')

  const partData = reactive({
    data: [
      {
        id: 1,
        name: '【研究院】',
        content: `
        瑞达期货研究院成立于2003年，是业内较早的期货研究机构，在业内具有较高的知名度和较强的影响力。 
        多次获大商所全国十大研发团队称号，并多次在和讯、中金在线、期货日报等媒体评选“最佳研究院”、“优势品种分析师”等称号。 
        研究范围覆盖宏观经济、金融、金属、能源化工、农产品、套利、产品开发等相关领域，对内建立了一套功能强大的宏观、 行业以及商品数据分析系统，
        对外与相关行业协会、期交所以及中国行业信息咨询机构保持良好的交流与合作， 
        研究成果在《中国证券报》、《上海证券报》、《期货日报》、《投资有道》、《中国黄金报》、和讯网、全景网、金融界、 新浪网等核心财经媒体均有发表。 
        `
      },
      {
        id: 2,
        name: '【系统简介】',
        content: `
        瑞智分析决策系统是瑞达研究院自主研发的一套集期货资讯和数据分析为一体的期货分析决策助手。系统从资讯报告、策略分析、行业数据出发，提供研究院最新的研究资讯内容。
        行业数据库整理了品种研究使用的相关数据，定制数据库根据您的需要，我们为您整理，将研究数据做到更加系统化，针对期货的研究提供了更清晰可用的数据。
        `
      }
    ]
  })

  const imageList = ref([])
  const suggestText = ref('')
  const saveLoading = ref(false)
  const dialogImage = reactive({
    url: '',
    visible: false
  })

  // const handleRemoveImg = (file, files) => {
  //   // console.log(file, files)
  // }
  const handlePreviewImg = (file) => {
    console.log(file)
    dialogImage.url = file.url
    dialogImage.visible = true
  }
  const handleUploadSuccess = (res, file) => {
    file.url = res.data.image_url
  }
  const saveSuggest = () => {
    const imgs = imageList.value.map(i => i.url)
    if (imgs.length < 1 && suggestText.value.length < 1) {
      ElMessage.error('请填写意见或上传图片再保存!');
      return
    }
    saveLoading.value = true
    SaveSuggest({'image_list': imgs, 'text': suggestText.value})
    .then((res) => {
      saveLoading.value = false
      ElMessageBox.alert(res.message, '感谢').then(() => {
        if (res.code === 2000) {
          suggestText.value = ''
          imageList.value = []
        }
      })
    })
    .catch(() => {
      saveLoading.value = false
    })
  }

</script>
<template>
  <div class="page-content">
    <div class="part" v-for="p in partData.data" :key="p.id">
      <div class="title">{{ p.name }}</div>
      <div v-html="p.content" class="content"></div>
    </div>

    <div class="explain">
      【免责声明】 
      系统使用过程中产生任何问题、任何通过本软件获得的内容，本网站的作者和发行方对其合法性概不负责， 亦不承担任何法律责任。
      任何单位、或个人认为本站提供的内容可能涉嫌侵犯其合法权益， 应该及时向本站反馈详细侵权情况，我们在收到证明侵权内容的证明后，将会尽快移除被控侵权内容。 
      本站由于不可抗力因素，例如停电、自然灾害等因素有可能造成服务不可持续。 
      我们力求站内内容信息准确可靠，但对这些信息的准确性及完整性不做任何保证，据此投资，责任自负。 本站提供的内容不构成个人投资建议，
      客户应考虑信息是否符合其特定状况。研报等内容版权仅为我公司所有，未经书面许可，任何机构和个人不得以任何形式翻版、复制和发布。
       如引用、刊发，需注明出处为瑞达期货股份有限公司研究院，且不得对本报告进行有悖原意的引用、删节和修改。
    </div>
    <div class="link">
      <div class="link-box">
        <div class="title">
          了解更多资讯与服务，可扫码与我们取得联系：
        </div>
        <div>
          <el-image class="qrcode-image" :src="kfImg" />
        </div>
        <div class="phone">
          电话：0595-36208232
        </div>
      </div>
      <div class="suggest-box">
        <div class="title">
          您在使用的过程中有任何的问题和建议都可以提交给我们：
        </div>
        <div>
          <el-input
            v-model="suggestText"
            show-word-limit
            class="text-int"
            type="textarea"
            placeholder="将您宝贵的建议写在这里，可点击下方+号上传图片辅助说明"
            maxlength="999"
            :rows="6"
          />
        </div>
        <div>
          <el-upload
            v-model:file-list="imageList"
            list-type="picture-card"
            name="image"
            :limit="6"
            :data="{scope: 'suggest'}"
            :action="uploadImgURL"
            :on-preview="handlePreviewImg"
            :on-success="handleUploadSuccess"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </div>
        <div class="save-action">
          <el-button type="primary" :loading="saveLoading" @click="saveSuggest">确认提交</el-button>
        </div>
      </div>
    </div>
    <!-- 图片预览 -->
    <el-dialog v-model="dialogImage.visible" title="查看图片">
      <el-image fit="cover" :src="dialogImage.url" alt="预览" />
    </el-dialog>
  </div>
</template>
<style scoped lang="scss">
  .page-content {
    padding: 0 15px;
    width: 1400px;
    height: calc(100vh - #{$navbar-height});
    .part {
      line-height: 26px;
      width: 1370px;
      .title {
        font-weight: 600;
        font-size: 15px;
      }
      .content {
        text-indent: 2em;
        font-size: 14px;
      }
    }
    .explain{
      width: 1370px;
      padding: 10px 0;
      position: absolute;
      bottom: 0;
      font-size: 11px;
      line-height: 22px;
      color: #444;
    }
    .link {
      margin-left: 10px;
      margin-top: 20px;
      display: flex;
      .link-box {
        .title {
          color: $goldenColor;
          margin-bottom: 10px;
          font-weight: 600;
        }
        .qrcode-image {
          width: 240px;
          height: 270px;
        }
        .phone {
          font-size: 21px;
          font-weight: 600;
        }
      }
      .suggest-box {
        margin-left: 30px;
        border-left: 1px solid #eee;
        padding-left: 30px;
        .title {
          color: #349cfc;
          font-weight: 600;
          margin-bottom: 10px;
        }
        .text-int {
          width: 950px;
          margin-bottom: 10px;
          font-size: 15px;
        }
        .save-action {
          margin-top: 10px;
          text-align: right;
          .el-button {
            width: 150px;
            height: 40px;
          }
        }
      }
    }
  }
</style>